<template>
  <div class="app-container">
    <SearchFilter size="mini" :maxShow="9" @search="handleQuery" @reset="resetQuery">
<!--      <el-form-item label="客户状态" prop="status">-->
<!--        <el-select multiple v-model="queryParams.statusList" placeholder="请选择客户状态" clearable>-->
<!--          <el-option-->
<!--              v-for="dict in dict.type.customer_status"-->
<!--              :key="dict.value"-->
<!--              :label="dict.label"-->
<!--              :value="dict.value"-->
<!--          />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item label="跟进记录" prop="flowerLog">
        <el-input
          v-model="queryParams.flowerLog"
          placeholder="请输入跟进记录关键字"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户名" prop="userName">
        <el-input
            v-model="queryParams.userName"
            placeholder="请输入客户名"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户昵称" prop="nickName">
        <el-input
            v-model="queryParams.nickName"
            placeholder="请输入客户昵称"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户类型" prop="customerType">
        <el-select v-model="queryParams.customerType" placeholder="请选择客户类型" clearable>
          <el-option
              v-for="dict in dict.type.custom_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="线索级别" prop="userType">
        <el-select v-model="queryParams.userType" placeholder="请选择线索级别" clearable>
          <el-option
              v-for="dict in dict.type.customer_level"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="用户邮箱" prop="email">
        <el-input
            v-model="queryParams.email"
            placeholder="请输入用户邮箱"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input
            v-model="queryParams.phone"
            placeholder="请输入电话"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="queryParams.sex" placeholder="请选择性别" clearable>
          <el-option
              v-for="dict in dict.type.sys_user_sex"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          />
        </el-select>
      </el-form-item>
<!--      <el-form-item label="线索渠道" prop="clueChannel">-->
<!--        <el-input-->
<!--            v-model="queryParams.clueChannel"-->
<!--            placeholder="请输入线索渠道"-->
<!--            clearable-->
<!--            @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="线索来源" prop="dataSource">
        <el-input
            v-model="queryParams.dataSource"
            placeholder="请输入线索来源"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否转介绍" prop="refCustomerId">
        <el-select v-model="queryParams.isRefCustomer" clearable placeholder="请选择">
          <el-option
              v-for="dict in dict.type.y_n"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="介绍客户" prop="refCustomerId">
        <el-input
            v-model="queryParams.refCustomer"
            placeholder="请输入转介绍关联的客户"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
<!--      <el-form-item label="客户居住区域ID" prop="liveAddressId">-->
<!--        <el-input-->
<!--            v-model="queryParams.liveAddressId"-->
<!--            placeholder="请输入客户居住区域ID"-->
<!--            clearable-->
<!--            @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="客户居住区域" prop="liveAddress">
        <el-input
            v-model="queryParams.liveAddress"
            placeholder="请输入客户居住区县/区域"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
<!--      <el-form-item label="是否大客户" prop="isBigCustomer">-->
<!--        <el-input-->
<!--            v-model="queryParams.isBigCustomer"-->
<!--            placeholder="请输入是否大客户"-->
<!--            clearable-->
<!--            @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="职业" prop="bigCustomer">
        <el-input
            v-model="queryParams.bigCustomer"
            placeholder="请输入职业"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户单位" prop="bigCustomerDtl">
        <el-input
            v-model="queryParams.bigCustomerDtl"
            placeholder="请输入客户企业单位"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="微信" prop="wechat">
        <el-input
            v-model="queryParams.wechat"
            placeholder="请输入微信"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="征信情况" prop="creditInvestigation">
        <el-input
            v-model="queryParams.creditInvestigation"
            placeholder="请输入征信情况"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
<!--      <el-form-item label="付款方式" prop="payWay">-->
<!--        <el-input-->
<!--            v-model="queryParams.payWay"-->
<!--            placeholder="请输入付款方式"-->
<!--            clearable-->
<!--            @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="付款按揭类型" prop="payMortgageType">
        <el-select v-model="queryParams.payMortgageType" placeholder="请选择付款按揭类型" clearable>
          <el-option
              v-for="dict in dict.type.mortgage_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否有旧车" prop="isExistModel">
        <el-input
            v-model="queryParams.isExistModel"
            placeholder="请输入是否有旧车"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
<!--      <el-form-item label="旧车ID" prop="existModelId">-->
<!--        <el-input-->
<!--            v-model="queryParams.existModelId"-->
<!--            placeholder="请输入旧车ID"-->
<!--            clearable-->
<!--            @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="旧车车型" prop="existModels">
        <el-input
            v-model="queryParams.existModels"
            placeholder="请输入旧车置换/保有车型"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="旧车是否评估" prop="isAssessment">
        <el-input
            v-model="queryParams.isAssessment"
            placeholder="请输入旧车是否评估"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="旧车评估价格" prop="assessmentPrice">
        <el-input
            v-model="queryParams.assessmentPrice"
            placeholder="请输入旧车评估价格"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="意向车型颜色" prop="intentionCarColor">
        <el-input
            v-model="queryParams.intentionCarColor"
            placeholder="请输入意向车型颜色"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="意向车型" prop="intentionCarModels">
        <el-input
            v-model="queryParams.intentionCarModels"
            placeholder="请输入意向车系,车型"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
<!--      <el-form-item label="对比车型" prop="contrastCarModels">-->
<!--        <el-input-->
<!--            v-model="queryParams.contrastCarModels"-->
<!--            placeholder="请输入对比车型"-->
<!--            clearable-->
<!--            @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="销售员" prop="saleUser">
        <el-input
            v-model="queryParams.saleUser"
            placeholder="请输入销售员"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否试驾" prop="isTestDrive">
        <el-input
            v-model="queryParams.isTestDrive"
            placeholder="请输入是否试驾"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否报价" prop="isOffer">
        <el-input
            v-model="queryParams.isOffer"
            placeholder="请输入是否报价"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否金融" prop="isFinance">
        <el-input
            v-model="queryParams.isFinance"
            placeholder="请输入是否金融"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
<!--      <el-form-item label="预计到店时间" prop="preToStoreDate">-->
<!--        <el-date-picker clearable-->
<!--                        v-model="queryParams.preToStoreDate"-->
<!--                        type="date"-->
<!--                        value-format="yyyy-MM-dd"-->
<!--                        placeholder="请选择预计到店时间">-->
<!--        </el-date-picker>-->
<!--      </el-form-item>-->
      <el-form-item label="上次到店时间" prop="lastToStoreDate">
        <el-date-picker clearable
                        v-model="queryParams.lastToStoreDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择上次到店时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="4S店" prop="storeName">
        <el-input
            v-model="queryParams.storeName"
            placeholder="请输入4S店"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="下单日期" prop="orderDate">
        <el-date-picker clearable
                        v-model="queryParams.orderDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择下单日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="到店状态" prop="storeStatus">
        <el-select v-model="queryParams.storeStatus" placeholder="请选择到店状态" clearable>
          <el-option
              v-for="dict in dict.type.to_store_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="最新跟进方式" prop="followUpMethod">
        <el-select v-model="queryParams.followUpMethod" placeholder="请选择跟进方式" clearable>
          <el-option
              v-for="dict in dict.type.follow_up_method"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <!--    </el-form>-->
    </SearchFilter>
    <el-row :gutter="10" class="mb8">
     <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:customer:add']"
        >新增</el-button>
      </el-col>
       <el-col :span="1.5">
         <el-button
           type="success"
           plain
           icon="el-icon-edit"
           size="mini"
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['system:customer:edit']"
         >修改</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
           type="danger"
           plain
           icon="el-icon-delete"
           size="mini"
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['system:customer:remove']"
         >删除</el-button>
       </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:customer:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns" :pageName="$options.name" ></right-toolbar>
    </el-row>

    <el-table  border :row-class-name="tableRowClassName" v-loading="loading" :data="customerList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="客户ID" align="center" prop="id"  v-if="columns[0].visible" show-overflow-tooltip />
      <el-table-column label="客户名" align="center" prop="userName" v-if="columns[1].visible" show-overflow-tooltip />
      <el-table-column label="客户昵称" align="center" prop="nickName" v-if="columns[2].visible" show-overflow-tooltip />
      <el-table-column label="客户类型" align="center" prop="customerType" v-if="columns[3].visible" show-overflow-tooltip >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.custom_type" :value="scope.row.customerType"/>
        </template>
      </el-table-column>
      <el-table-column label="线索级别" align="center" prop="userType" v-if="columns[4].visible" show-overflow-tooltip >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.customer_level" :value="scope.row.userType"/>
        </template>
      </el-table-column>
      <el-table-column label="用户邮箱" align="center" prop="email" v-if="columns[5].visible" show-overflow-tooltip />
      <el-table-column label="电话" align="center" prop="phone" v-if="columns[6].visible" show-overflow-tooltip />
      <el-table-column label="性别" align="center" prop="sex" v-if="columns[7].visible" show-overflow-tooltip >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
        </template>
      </el-table-column>
<!--      <el-table-column label="线索渠道" align="center" prop="clueChannel" v-if="columns[8].visible" show-overflow-tooltip >-->
<!--        <template slot-scope="scope">-->
<!--          <dict-tag :options="dict.type.clue_channels" :value="scope.row.clueChannel"/>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="线索来源" align="center" prop="dataSource" v-if="columns[9].visible" show-overflow-tooltip >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.customer_source" :value="scope.row.dataSource"/>
        </template>
      </el-table-column>
      <el-table-column label="介绍客户" align="center" prop="refCustomer" v-if="columns[10].visible" show-overflow-tooltip />
      <el-table-column label="客户居住区域" align="center" prop="liveAddress" v-if="columns[11].visible" show-overflow-tooltip />
<!--      <el-table-column label="客户状态" align="center" prop="status" v-if="columns[12].visible" show-overflow-tooltip >-->
<!--        <template slot-scope="scope">-->
<!--          <dict-tag :options="dict.type.customer_status" :value="scope.row.status"/>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="备注" align="center" prop="remark" v-if="columns[13].visible" show-overflow-tooltip />
<!--      <el-table-column label="是否大客户" align="center" prop="isBigCustomer" v-if="columns[14].visible" show-overflow-tooltip >-->
<!--        <template slot-scope="scope">-->
<!--          <dict-tag :options="dict.type.y_n" :value="scope.row.isBigCustomer"/>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="职业" align="center" prop="bigCustomer" v-if="columns[15].visible" show-overflow-tooltip >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.big_customer_type" :value="scope.row.bigCustomer"/>
        </template>
      </el-table-column>
      <el-table-column label="客户单位" align="center" prop="bigCustomerDtl" v-if="columns[16].visible" show-overflow-tooltip />
      <el-table-column label="微信" align="center" prop="wechat" v-if="columns[17].visible" show-overflow-tooltip />
      <el-table-column label="征信情况" align="center" prop="creditInvestigation" v-if="columns[18].visible" show-overflow-tooltip >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.credit_status" :value="scope.row.creditInvestigation"/>
        </template>
      </el-table-column>
<!--      <el-table-column label="付款方式" align="center" prop="payWay" v-if="columns[19].visible" show-overflow-tooltip >-->
<!--        <template slot-scope="scope">-->
<!--          <dict-tag :options="dict.type.car_pay_method" :value="scope.row.payWay"/>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="付款按揭类型" align="center" prop="payMortgageType" v-if="columns[20].visible" show-overflow-tooltip >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.mortgage_type" :value="scope.row.payMortgageType"/>
        </template>
      </el-table-column>
      <el-table-column label="是否有旧车" align="center" prop="isExistModel" v-if="columns[21].visible" show-overflow-tooltip >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.y_n" :value="scope.row.isExistModel"/>
        </template>
      </el-table-column>
      <el-table-column label="旧车车型" align="center" prop="existModels" v-if="columns[22].visible" show-overflow-tooltip />
      <el-table-column label="旧车是否评估" align="center" prop="isAssessment" v-if="columns[23].visible" show-overflow-tooltip >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.y_n" :value="scope.row.isAssessment"/>
        </template>
      </el-table-column>
      <el-table-column label="旧车评估价格" align="center" prop="assessmentPrice" v-if="columns[24].visible" show-overflow-tooltip />
      <el-table-column label="意向车型颜色" align="center" prop="intentionCarColor" v-if="columns[25].visible" show-overflow-tooltip />
      <el-table-column label="意向车型" align="center" prop="intentionCarModels" v-if="columns[26].visible" show-overflow-tooltip />
      <el-table-column label="销售员" align="center" prop="saleUser" v-if="columns[27].visible" show-overflow-tooltip />
      <el-table-column label="是否试驾" align="center" prop="isTestDrive" v-if="columns[28].visible" show-overflow-tooltip >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.y_n" :value="scope.row.isTestDrive"/>
        </template>
      </el-table-column>
      <el-table-column label="是否报价" align="center" prop="isOffer" v-if="columns[29].visible" show-overflow-tooltip >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.y_n" :value="scope.row.isOffer"/>
        </template>
      </el-table-column>
      <el-table-column label="是否金融" align="center" prop="isFinance" v-if="columns[30].visible" show-overflow-tooltip >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.y_n" :value="scope.row.isFinance"/>
        </template>
      </el-table-column>
<!--      <el-table-column label="接触次数" class-name="specialColor" align="center" prop="followUpTimes" v-if="columns[31].visible" show-overflow-tooltip />-->
      <el-table-column label="最新跟进日" class-name="specialColor" align="center" prop="followUpLastDate"  v-if="columns[32].visible" show-overflow-tooltip />
      <el-table-column label="最新跟进级别" class-name="specialColor" align="center" prop="followUpLastLevel"  v-if="columns[33].visible" show-overflow-tooltip />
      <el-table-column label="建议下次跟进日" class-name="specialColor" align="center" prop="proposalNextFollowDate"  v-if="columns[34].visible" show-overflow-tooltip />
      <el-table-column label="跟进超期" class-name="specialColor" align="center" prop="followUpOverdueDate" v-if="columns[35].visible" show-overflow-tooltip />
<!--      <el-table-column label="未订车原因" align="center" prop="unBookingCarReason" v-if="columns[36].visible" show-overflow-tooltip />-->
<!--      <el-table-column label="预计到店" align="center" prop="preToStoreDate"  v-if="columns[37].visible" show-overflow-tooltip  >-->
<!--        <template slot-scope="scope">-->
<!--          <span>{{ parseTime(scope.row.preToStoreDate, '{y}-{m}-{d}') }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="4S店" align="center" prop="storeName" v-if="columns[38].visible" show-overflow-tooltip />
      <el-table-column label="下单日期" align="center" prop="orderDate"  v-if="columns[39].visible" show-overflow-tooltip  >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.orderDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
<!--      <el-table-column label="到店状态" align="center" prop="storeStatus" v-if="columns[40].visible" show-overflow-tooltip >-->
<!--        <template slot-scope="scope">-->
<!--          <dict-tag :options="dict.type.to_store_status" :value="scope.row.storeStatus"/>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="上次到店时间" align="center" prop="lastToStoreDate" v-if="columns[41].visible" show-overflow-tooltip >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.lastToStoreDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最新跟进方式" align="center" prop="followUpMethod" v-if="columns[42].visible" show-overflow-tooltip >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.follow_up_method" :value="scope.row.followUpMethod"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="130" align="center" fixed class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleFollow(scope.row)"
            v-hasPermi="['system:customer:edit']"
          >跟进</el-button>
          <el-button v-if="scope.row.status=='initDoc'"
            size="mini"
            type="text"
            @click="handleToOrder(scope.row)"
            v-hasPermi="['system:customer:toOrder']"
          >下订单</el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:customer:edit']"
          >修改</el-button>
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            @click="handleDelete(scope.row)"-->
<!--            v-hasPermi="['system:customer:remove']"-->
<!--          >删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改客户信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="75%" append-to-body>
      <el-form ref="form" :model="form" :inline="true" :rules="rules" label-width="110px"  :label-position="labelPosition">
        <el-form-item label="客户名" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入客户名" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option
              v-for="dict in dict.type.sys_user_sex"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户类型" prop="customerType">
          <el-select v-model="form.customerType" placeholder="请选择客户类型">
            <el-option
              v-for="dict in dict.type.custom_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="线索级别" prop="userType">
          <el-select v-model="form.userType" placeholder="请选择线索级别">
            <el-option
              v-for="dict in dict.type.customer_level"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入电话" />
        </el-form-item>
<!--        <el-form-item label="线索渠道" prop="clueChannel" >-->
<!--          <el-select v-model="form.clueChannel" placeholder="请选择线索渠道">-->
<!--            <el-option-->
<!--              v-for="dict in dict.type.clue_channels"-->
<!--              :key="dict.value"-->
<!--              :label="dict.label"-->
<!--              :value="dict.value"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="线索来源" prop="dataSource">
          <el-select v-model="form.dataSource" placeholder="请选择线索来源" >
            <el-option
              v-for="dict in dict.type.customer_source"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入用户邮箱" />
        </el-form-item>
        <el-form-item label="意向车型" prop="intentionCarModelId">
          <el-select
              v-model="form.intentionCarModelId"
              filterable
              clearable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              @change="handleSelectChange"
              :remote-method="remoteMethod"
              :loading="loading"  style="width: 540px;">
            <el-option
                v-for="item in carList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="意向车型颜色" prop="intentionCarColor">
          <el-input v-model="form.intentionCarColor" placeholder="请输入意向车型颜色" />
        </el-form-item>
        <el-form-item label="居住区域" prop="liveAddressIds">
          <el-cascader ref="cascader"
              v-model="form.liveAddressIds"
              :options="areaOptions" :placeholder="form.liveAddress"
              style="width: 100%"
              :props="areaProps"
              @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="介绍客户" prop="refCustomerId">
          <el-select
              v-model="form.refCustomerId"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              @change="handleRefCustomerSelectChange"
              :remote-method="remoteRefMethod"
              :loading="loading">
            <el-option
                v-for="item in refCustomerList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户状态" prop="status">
          <el-select :disabled="addFlag" v-model="form.status" placeholder="请选择客户状态">
            <el-option
              v-for="dict in dict.type.customer_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="是否大客户" prop="isBigCustomer">-->
<!--          <el-radio-group v-model="form.isBigCustomer">-->
<!--            <el-radio-button label=1>是</el-radio-button>-->
<!--            <el-radio-button label=0>否</el-radio-button>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
        <el-form-item label="职业" prop="bigCustomer" >
          <el-select v-model="form.bigCustomer" placeholder="请选择职业">
            <el-option
              v-for="dict in dict.type.big_customer_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户单位" prop="bigCustomerDtl">
          <el-input v-model="form.bigCustomerDtl" placeholder="请输入大客户企业单位" />
        </el-form-item>
        <el-form-item label="微信" prop="wechat">
          <el-input v-model="form.wechat" placeholder="请输入微信" />
        </el-form-item>
        <el-form-item label="微信昵称" prop="nickName">
          <el-input v-model="form.nickName" placeholder="请输入客户昵称" />
        </el-form-item>
        <el-form-item label="征信情况" prop="creditInvestigation">
          <el-select v-model="form.creditInvestigation" placeholder="请选择征信情况">
            <el-option
              v-for="dict in dict.type.credit_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="付款方式" prop="payWay">-->
<!--          <el-select v-model="form.payWay" placeholder="请选择付款方式">-->
<!--            <el-option-->
<!--              v-for="dict in dict.type.car_pay_method"-->
<!--              :key="dict.value"-->
<!--              :label="dict.label"-->
<!--              :value="dict.value"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="按揭类型" prop="payMortgageType">
          <el-select v-model="form.payMortgageType" placeholder="请选择付款按揭类型">
            <el-option
              v-for="dict in dict.type.mortgage_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否有旧车" prop="isExistModel">
          <el-radio-group v-model="form.isExistModel">
            <el-radio-button label=1>是</el-radio-button>
            <el-radio-button label=0>否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="旧车车型" prop="existModelId" v-if="form.isExistModel==1" >
          <el-select
              v-model="form.existModelId"
              filterable
              clearable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              @change="handleExistSelectChange"
              :remote-method="remoteMethod"
              :loading="loading"  style="width: 540px;">
            <el-option
                v-for="item in carList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="旧车是否评估" prop="isAssessment" v-if="form.isExistModel==1">
          <el-radio-group v-model="form.isAssessment">
            <el-radio-button label=1>是</el-radio-button>
            <el-radio-button label=0>否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="旧车评估价格" prop="assessmentPrice" v-if="form.isExistModel==1">
          <el-input-number v-model="form.assessmentPrice" placeholder="请输入旧车评估价格" />
        </el-form-item>
<!--        <el-form-item label="对比车型" prop="contrastCarModels">-->
<!--          <el-select-->
<!--              v-model="form.contrastCarModels"-->
<!--              filterable-->
<!--              clearable-->
<!--              remote-->
<!--              reserve-keyword-->
<!--              placeholder="请输入关键词"-->
<!--              :remote-method="remoteMethod"-->
<!--              :loading="loading"  style="width: 540px;">-->
<!--            <el-option-->
<!--                v-for="item in carList"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="销售员" prop="saleUser">
          <el-input v-model="form.saleUser" placeholder="请输入销售员" />
        </el-form-item>
        <el-form-item label="是否试驾" prop="isTestDrive">
          <el-radio-group v-model="form.isTestDrive">
            <el-radio-button label=1>是</el-radio-button>
            <el-radio-button label=0>否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否报价" prop="isOffer">
          <el-radio-group v-model="form.isOffer">
            <el-radio-button label=1>是</el-radio-button>
            <el-radio-button label=0>否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否金融" prop="isFinance">
          <el-radio-group v-model="form.isFinance">
            <el-radio-button label=1>是</el-radio-button>
            <el-radio-button label=0>否</el-radio-button>
          </el-radio-group>
        </el-form-item>
<!--                <el-form-item label="未订车原因" prop="unBookingCarReason">-->
<!--                  <el-input v-model="form.unBookingCarReason" type="textarea" placeholder="请输入内容" />-->
<!--                </el-form-item>-->
<!--               <el-form-item label="预计到店时间" prop="preToStoreDate">-->
<!--                  <el-date-picker clearable-->
<!--                                  v-model="form.preToStoreDate"-->
<!--                                  type="date"-->
<!--                                  value-format="yyyy-MM-dd"-->
<!--                                  placeholder="请选择预计到店时间">-->
<!--                  </el-date-picker>-->
<!--                   </el-form-item>-->
        <!--     <el-form-item label="最后一次到店日期" prop="lastToStoreDate">
             <el-date-picker clearable
                             v-model="form.lastToStoreDate"
                             type="date"
                             value-format="yyyy-MM-dd"
                             placeholder="请选择最后一次到店日期">
             </el-date-picker>
           </el-form-item>-->
        <el-form-item label="4S店" prop="storeName">
          <el-input v-model="form.storeName" placeholder="请输入4S店" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
                <el-form-item label="下单日期" prop="orderDate">
                  <el-date-picker clearable
                                  v-model="form.orderDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择下单日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="到店状态" prop="storeStatus">
                  <el-select :disabled="addFlag" v-model="form.storeStatus" placeholder="请选择到店状态">
                    <el-option
                      v-for="dict in dict.type.to_store_status"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加客户跟进记录Drawer 抽屉 -->
    <el-drawer :title="followTitle" :before-close="handleDrawerClose" :visible.sync="drawer" size="50%">
      <div style="position: fixed;top: 40px;left: 65%;z-index: 100;font-size: smaller">
        <el-radio-group v-model="reverse">
          <el-radio :label="true">倒序</el-radio>
          <el-radio :label="false">正序</el-radio>
        </el-radio-group>
        <el-button size="mini" type="primary" icon="el-icon-edit" style="position: relative;left: 100px" @click="handleDrawerAddFollowUp" >新增</el-button>
      </div>
      <el-timeline :reverse="reverse">
        <el-timeline-item placement="top" color="rgb"   v-for="(follow, index) in followUpList" :key="index" :timestamp="follow.followUpDate">
          <el-card shadow="hover">
            <el-row :gutter="20">
              <el-col :span="7"><el-tag>跟进方式:</el-tag>
                {{follow.followUpMethod}}</el-col>
              <el-col :span="7"><el-tag>跟进结果:</el-tag> {{follow.followResultDesc}}</el-col>
              <el-col :span="6" v-show="follow.followResult!='fail'"><el-tag>意向级别:</el-tag> {{follow.intentionLevel}}</el-col>
            </el-row>
            <el-row :gutter="20" v-show="follow.followResult == 'maker'" >
              <el-col :span="10"><el-tag>预约时间:</el-tag> {{follow.appointmentTime}} </el-col>
              <el-col :span="10" v-show="follow.followResult !='fail' && follow.nextFollowUpTime " ><el-tag>下次跟进时间:</el-tag> {{follow.nextFollowUpTime}}</el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col ><el-tag>本次跟进记录:</el-tag> {{follow.followUpRecord}}</el-col>
            </el-row>
            <el-row :gutter="20" v-show="follow.followResult !='fail' && follow.nextFollowUpRecord" >
              <el-col > <el-tag>下次跟进记录:</el-tag> {{follow.nextFollowUpRecord}}</el-col>
            </el-row>
            <el-row :gutter="20" v-show="follow.followResult=='fail'" >
              <el-col ><el-tag>战败原因:</el-tag> {{follow.defeatReasons}}</el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col ><el-tag>提交于</el-tag>{{follow.createTime}}</el-col>
            </el-row>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <el-drawer title="新增跟进日志" :append-to-body="true" :visible.sync="innerDrawer">
        <el-form ref="followForm" :model="followForm" :rules="followRules" label-width="140px">
          <el-form-item label="跟进日期" prop="followUpDate">
            <el-date-picker clearable
                            v-model="followForm.followUpDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择跟进日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="跟进方式" prop="followUpMethod">
            <el-select v-model="followForm.followUpMethod" placeholder="请选择跟进方式" clearable>
              <el-option
                v-for="dict in dict.type.follow_up_method"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="本次跟进记录" prop="followUpRecord">
            <el-input v-model="followForm.followUpRecord" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="跟进结果" prop="followResult">
            <el-radio-group v-model="followForm.followResult" @input="selctRadion">
              <el-radio-button v-for="dict in dict.type.follow_result"
                               :key="dict.value"
                               :label="dict.value"
                               :name="dict.value">{{ dict.label }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item  v-show="followFormShow.appointmentTimeShow" label="预约时间" prop="appointmentTime" :rules="followForm.followResult=='maker' ? [{ required:true, message: '预约时间不能为空', trigger: 'blur'}]:[{ required:false}]">
            <el-date-picker clearable
                            v-model="followForm.appointmentTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="请选择预约时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item v-show="followFormShow.nextFollowUpTimeShow" label="下次跟进时间" prop="nextFollowUpTime" :rules="followForm.followResult == 'fail' ?[{ required:false}] : [{ required:true, message: '下次跟进时间不能为空', trigger: 'blur'}]">
            <el-date-picker clearable
                            v-model="followForm.nextFollowUpTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="请选择下次跟进时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item v-show="followFormShow.nextFollowUpRecordShow" label="下次跟进记录" prop="nextFollowUpRecord">
            <el-input v-model="followForm.nextFollowUpRecord" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item v-show="followFormShow.intentionLevelShow"  label="意向级别" prop="intentionLevel" :rules="followForm.followResult=='fail' ? [{ required:false}]  : [{ required:true, message: '意向级别不能为空', trigger: 'blur'}]">
            <el-select v-model="followForm.intentionLevel" placeholder="请选择级别" clearable>
              <el-option
                v-for="dict in dict.type.customer_level"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-show="followFormShow.defeatReasonsShow" label="战败原因" prop="defeatReasons" :rules="followForm.followResult!='fail' ? followForm.defeatReasons : [{ required:true, message: '战败原因不能为空', trigger: 'blur'}]">
            <el-input v-model="followForm.defeatReasons" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="followForm.remark" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-form>
        <div style="text-align: center">
          <el-button type="primary" @click="submitFollowForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-drawer>
    </el-drawer>

    <el-dialog :title="orderTitle" :visible.sync="orderOpen" width="650px" append-to-body>
      <el-form ref="orderForm" :model="orderForm" :rules="orderRules" label-width="80px">
        <el-form-item label="客户" prop="customerName">
          {{orderForm.customerName}}
        </el-form-item>
        <el-form-item label="订车时间" prop="orderDate">
          <el-date-picker clearable
                          v-model="orderForm.orderDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择订车时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="车系车型" prop="carInfoId">
          <el-select
              v-model="orderForm.carInfoId"
              filterable
              clearable
              remote
              reserve-keyword
              :placeholder="orderForm.carInfo"
              @change="handleSelectCarChange"
              :remote-method="remoteMethod"
              :loading="loading"  style="width: 540px;">
            <el-option
                v-for="item in carList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车辆VIN" prop="carVin">
          <el-input v-model="orderForm.carVin" placeholder="请输入车辆VIN" />
        </el-form-item>
        <el-form-item label="车辆颜色" prop="carColor">
          <el-input v-model="orderForm.carColor" placeholder="请输入车辆颜色" />
        </el-form-item>
        <el-form-item label="车辆价格" prop="carPrices">
          <el-input-number v-model="orderForm.carPrices" placeholder="请输入车辆价格" />
        </el-form-item>
        <el-form-item label="车辆状态" prop="carStatus">
          <el-select v-model="orderForm.carStatus" placeholder="请选择车辆状态">
            <el-option
              v-for="dict in dict.type.car_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出库日期" prop="outDate">
          <el-date-picker clearable
                          v-model="orderForm.outDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择出库日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="orderForm.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="orderSubmitForm">确 定</el-button>
        <el-button @click="orderCancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 选择车型的Drawer 抽屉 -->
  </div>
</template>

<script>
import {
  listCustomer,
  getCustomer,
  delCustomer,
  addCustomer,
  updateCustomer,
  addCustomerFollowRecerd, updateCustomerFollowRecerd, listCustomerFollow, addCustomerOrderRecerd
} from "@/api/system/customer";
import { listArea,listAreaTree,listBy } from "@/api/system/area";
import { transCascaderData } from "@/utils/ruoyi";
import { listCarType, getCarList } from "@/api/system/carType";
import SearchFilter from '@/components/SearchFilter/index.vue'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
let id = 0;
export default {
  components: {SearchFilter,Treeselect},
  name: "potentialCustomer",
  dicts: ['credit_status', 'to_store_status', 'car_status','customer_source', 'custom_type', 'y_n', 'mortgage_type', 'big_customer_type', 'sys_user_sex', 'customer_level', 'customer_status', 'clue_channels', 'car_pay_method','follow_up_method','follow_result'],
  data() {
    return {
      carList:[],
      medium:'medium',
      labelPosition: 'right',
      drawer:false,
      reverse: true,
      refCustomerList: [],
      areaOptions:undefined,
      areaProps: {
        // value: "value",
        // label: "label",
        // checkStrictly: false,
        // children: 'children',    //子元素字段名
        lazy: true,
        lazyLoad (node, resolve) {
          console.log(node);
          const { level } = node;
          const param = {
            level: 1,
            pid: 0
          }
          if (level === 0) {
            listBy(param).then(res => {
              console.log(res)
              const nodes = res.rows.map((item, index) => ({
                value: item.id,
                label: item.cityname,
                leaf:node.level >= 2
              }));
              resolve(nodes)
            })
          } else if (level === 1) {
            param.level = 2
            param.pid = node.value
            listBy(param).then(res => {
              const nodes = res.rows.map((item, index) => ({
                value: item.id,
                label: item.cityname,
                leaf:node.level >= 2
              }));
              resolve(nodes)
            })
          }else if (level === 2) {
            param.level = 3
            param.pid = node.value
            listBy(param).then(res => {
              const nodes = res.rows.map((item, index) => ({
                value: item.id,
                label: item.cityname,
                leaf:node.level >= 2
              }));
              resolve(nodes)
            })
          }
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
        }
      },
      innerDrawer:false,
      dafaultValue:null,
      customerId:null,
      customerStatus:null,
      daterangeCreateTime:null,
      carDataList:[],
      // 遮罩层
      loading: true,
      followTitle:null,
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedFollowUp: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 客户信息表格数据
      customerList: [],
      // 跟进模块-客户跟进记录表格数据
      followUpList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      addFlag:true,
      orderOpen:false,
      orderTitle:null,
      orderForm:{
        carColor:null,
      },
      orderRules:{
        orderDate: [
          { required: true, message: "订单日期不能为空", trigger: "blur" }
        ],
        carInfo: [
          { required: true, message: "车辆信息不能为空", trigger: "blur" }
        ],
        carColor:[ { required: true, message: "车辆颜色不能为空", trigger: "blur" }],
        carVin: [
          { required: true, message: "车辆VIN不能为空", trigger: "blur" }
        ],
        carStatus:[
          { required: true, message: "车辆状态不能为空", trigger: "change" }
        ],
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: null,
        nickName: null,
        customerType: null,
        userType: null,
        email: null,
        phone: null,
        sex: null,
        avatar: null,
        clueChannel: null,
        dataSource: null,
        refCustomerId: null,
        liveAddressId: null,
        liveAddress: null,
        status: null,
        statusList: null,
        loginIp: null,
        loginDate: null,
        isBigCustomer: null,
        bigCustomer: null,
        bigCustomerDtl: null,
        wechat: null,
        buyCarType: null,
        creditInvestigation: null,
        payWay: null,
        payMortgageType: null,
        isExistModel: null,
        existModelId: null,
        existModels: null,
        isAssessment: null,
        assessmentPrice: null,
        intentionCarColor: null,
        intentionCarModelId: null,
        intentionCarModels: null,
        contrastCarModels: null,
        saleUser: null,
        isTestDrive: null,
        isOffer: null,
        isFinance: null,
        unBookingCarReason: null,
        preToStoreDate: null,
        lastToStoreDate: null,
        storeName: null,
        orderDate: null,
        storeStatus: null
      },
      // 表单参数
      form: {

      },
      followForm:{
        followUpDate:null,
        customerId:null,
      },
      followFormShow:{
        appointmentTimeShow:false,
        intentionLevelShow:false,
        nextFollowUpTimeShow:false,
        nextFollowUpRecordShow:false,
        defeatReasonsShow:false,
      },
      // 表单校验
      rules: {
        userName: [
          { required: true, message: "客户名不能为空", trigger: "blur" }
        ],
        customerType:[
          { required: true, message: "客户类型不能为空", trigger: "blur" }
        ],
        // clueChannel: [
        //   { required: true, message: "线索渠道不能为空", trigger: "blur" }
        // ],
        userType:[  { required: true, message: "线索级别不能为空", trigger: "blur" }],
        dataSource: [
          { required: true, message: "信息来源不能为空", trigger: "change" }
        ],
        intentionCarModelId: [
          { required: true, message: "意向车型不能为空", trigger: "blur" }
        ],
        intentionCarColor: [
          { required: true, message: "意向车型颜色不能为空", trigger: "blur" }
        ],
      },
      // 跟进表单校验
      followRules: {
        followUpDate: [
          { required: true, message: "跟进日期不能为空", trigger: "blur" }
        ],
        followUpRecord:[
          { required: true, message: "跟进记录不能为空", trigger: "blur" }
        ],
        intentionLevel: [
          { required: true, message: "级别不能为空", trigger: "blur" }
        ],
        followUpMethod:[
          { required: true, message: "跟进方式不能为空", trigger: "blur" }
        ],
        followResult:[
          { required: true, message: "跟进结果不能为空", trigger: "blur" }
        ]
      },
// 列表的列的显示隐藏设置
      columns:[
        { key: 0, label: `客户ID`, visible: true },
        { key: 1, label: `客户名`, visible: true },
        { key: 2, label: `客户昵称`, visible: true },
        { key: 3, label: `客户类型`, visible: true },
        { key: 4, label: `线索级别`, visible: true },
        { key: 5, label: `用户邮箱`, visible: true },
        { key: 6, label: `电话`, visible: true },
        { key: 7, label: `性别`, visible: true },
        { key: 8, label: `线索渠道`, visible: true },
        { key: 9, label: `线索来源`, visible: true },
        { key: 10, label: `转介客户`, visible: true },
        { key: 11, label: `客户居住区域`, visible: true },
        { key: 12, label: `客户状态`, visible: true },
        { key: 13, label: `备注`, visible: true },
        { key: 14, label: `是否大客户`, visible: true },
        { key: 15, label: `职业`, visible: true },
        { key: 16, label: `客户单位`, visible: true },
        { key: 17, label: `微信`, visible: true },
        { key: 18, label: `征信情况`, visible: true },
        { key: 19, label: `付款方式`, visible: true },
        { key: 20, label: `付款按揭类型`, visible: true },
        { key: 21, label: `是否有旧车`, visible: true },
        { key: 22, label: `旧车车型`, visible: true },
        { key: 23, label: `旧车是否评估`, visible: true },
        { key: 24, label: `旧车评估价格`, visible: true },
        { key: 25, label: `意向车型颜色`, visible: true },
        { key: 26, label: `意向车型`, visible: true },
        { key: 27, label: `销售员`, visible: true },
        { key: 28, label: `是否试驾`, visible: true },
        { key: 29, label: `是否报价`, visible: true },
        { key: 30, label: `是否金融`, visible: true },
        { key: 31, label: `跟进次数`, visible: true },
        { key: 32, label: `最新跟进日`, visible: true },
        { key: 33, label: `最新跟进级别`, visible: true },
        { key: 34, label: `建议下次跟进日`, visible: true },
        { key: 35, label: `跟进超期`, visible: true },
        { key: 36, label: `未订车原因`, visible: true },
        { key: 37, label: `预计到店`, visible: true },
        { key: 38, label: `4S店`, visible: true },
        { key: 39, label: `下单日期`, visible: true },
        { key: 40, label: `到店状态`, visible: true },
        { key: 41, label: `上次到店时间`, visible: true },
        { key: 42, label: `最新跟进方式`, visible: true },
      ],
    };
  },
  created() {
    this.getList();
    this.dafaultValue = new Date;
    var columns1 = JSON.parse(localStorage.getItem(this.$options.name));
    if(columns1){
      this.columns = columns1;
    }
  },
  methods: {
    /** 查询客户信息列表 */
    getList() {
      this.loading = true;
      // this.queryParams.status = 'potential';
      listCustomer(this.queryParams).then(response => {
        this.customerList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    tableRowClassName({row, rowIndex}) {
      if (row.proposalNextFollowDate === '24小时内回访') {
        return 'warning-row';
      } else if (this.getDateYYYYMMdd() > row.proposalNextFollowDate) {
         return 'danger-row';
      }else {
       // return 'success-row';
      }
      return '';
    },
    handleRefCustomerSelectChange(val){
      var obj={}
      obj= this.refCustomerList.find(function(i){
        return i.value ===val
      });
      //在change中获取到整条对象数据
      this.form.refCustomer = obj.label;
      console.log(obj);
    },
    handleExistSelectChange(val){
      var obj={}
      obj= this.carList.find(function(i){
        return i.value ===val
      });
      //在change中获取到整条对象数据
      this.form.existModels = obj.label;
      console.log(obj);
    },
    handleSelectChange(val){
      var obj={}
      obj= this.carList.find(function(i){
        return i.value ===val
      });
      //在change中获取到整条对象数据
      this.form.intentionCarModels = obj.label;
      console.log(obj);
    },
    handleSelectCarChange(val){
      var obj={}
      obj= this.carList.find(function(i){
        return i.value ===val
      });
      //在change中获取到整条对象数据
      this.orderForm.carInfo = obj.label;
      console.log(obj);
    },
    remoteRefMethod(query){
      let params = {
        userName: query
      }
      listCustomer(params).then(response => {
        for(let item of response.rows) {
          item.label =item.userName;
          item.value = item.id;
        }
        this.refCustomerList = response.rows;
      });
    },
    //远程搜索品牌数据
    remoteMethod(query) {
      let params = {
        name: query
      }
      console.log(params);
      if (query !== '') {
        this.getCarList(params);
      } else {
        this.carList = [];
      }
    },
    getCarList(params) {
      getCarList(params).then(response => {
        for(let item of response.rows) {
          item.label =item.brandName + " / " + item.fctName + " / " + item.seriesName+" / "+item.name;
          item.value = item.typeId;
        }
        this.carList = response.rows;
      });
    },
    /** 查询区域结构 */
    getAreaList() {
      let params = {}
      // listAreaTree(params).then(response => {
      //   console.log(response);
      //   // this.areaOptions = this.transCascaderData(response.data);
      //   this.areaOptions = response.data;
      // });
    },
    handleChange(data) {
      console.log(data);
      const  values = data;
      try {
        let checkedNodes = this.$refs['cascader'].getCheckedNodes()[0];
        console.log(checkedNodes);
        if (checkedNodes) {
          const pathLabels = checkedNodes.pathLabels
          if (pathLabels) {
            this.form.sheng = pathLabels[0]
            this.form.shengId = values[0]
            if (pathLabels.length > 1) {
              this.form.shi = pathLabels[1]
              this.form.shiId = values[1]
            }
            if (pathLabels.length > 2) {
              this.form.qu = pathLabels[2]
              this.form.quId = values[2]
            }
            if (pathLabels.length > 3) {
              // this.form.makeYear = pathLabels[3]
            }
            this.form.liveAddress = pathLabels.join("/")
            this.form.liveAddressId = values.join(",")
          }
        }
        console.log(this.form)
      } catch (error) {
        console.log(error)
      }
    },
    /** 查询客户跟进信息列表 */
    getFollowList(customerId) {
      let that = this;
      this.loading = true;
      let queryParams = {
        customerId:customerId,
        pageNum:1,
        pageSize:1000,
        // followType:'potential'
      }
      let dictType = that.dict.type;
      listCustomerFollow(queryParams).then(response => {
        this.followUpList = response.rows;
        //赋值
        for (let follow of this.followUpList) {
          let followUpMethod = this.getDictLableByVal(dictType.follow_up_method,follow.followUpMethod);
          let followResult = this.getDictLableByVal(dictType.follow_result,follow.followResult);
          let intentionLevel = this.getDictLableByVal(dictType.customer_level,follow.intentionLevel);
          follow.followUpMethod = followUpMethod;
          follow.followResultDesc = followResult;
          follow.intentionLevel = intentionLevel;
        }
        this.total = response.total;
        this.loading = false;
      });
    },
    //跟进字典val获取描述
    getDictLableByVal(dictData,val){
      let lable = '';
      dictData.map(i =>{
        if (i.value == val) {
          lable = i.label
        }
      })
      return lable
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        userName: null,
        nickName: null,
        customerType: null,
        userType: null,
        email: null,
        phone: null,
        sex: null,
        avatar: null,
        clueChannel: null,
        dataSource: null,
        refCustomerId: null,
        liveAddressId: null,
        liveAddress: null,
        status: "0",
        delFlag: null,
        loginIp: null,
        loginDate: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        isBigCustomer: null,
        bigCustomer: null,
        bigCustomerDtl: null,
        wechat: null,
        buyCarType: null,
        creditInvestigation: null,
        payWay: null,
        payMortgageType: null,
        isExistModel: null,
        existModelId: null,
        existModels: null,
        isAssessment: null,
        assessmentPrice: null,
        intentionCarColor: null,
        intentionCarModelId: null,
        intentionCarModels: null,
        contrastCarModels: null,
        saleUser: null,
        isTestDrive: null,
        isOffer: null,
        isFinance: null,
        unBookingCarReason: null,
        preToStoreDate: null,
        lastToStoreDate: null,
        storeName: null,
        orderDate: null,
        storeStatus: "0"
      };
      this.followUpList = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams={};
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.form.status = 'initDoc';
      this.form.storeStatus = 'noStore';
      this.open = true;
      this.title = "添加客户信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      if(row.intentionCarModelObj){
        this.carList.push({
          label : row.intentionCarModelObj.brandName + " / " + row.intentionCarModelObj.fctName + " / " + row.intentionCarModelObj.seriesName+" / "+row.intentionCarModelObj.name,
          value : row.intentionCarModelId
        })
      }
      if(row.existModelObj){
        this.carList.push({
          label : row.existModelObj.brandName + " / " + row.existModelObj.fctName + " / " + row.existModelObj.seriesName+" / "+row.existModelObj.name,
          value : row.existModelId
        })
      }
      getCustomer(id).then(response => {
        this.form = response.data;
        this.followUpList = response.data.followUpList;
        this.open = true;
        this.title = "修改客户信息";
        this.getAreaList();
      });
    },
    /**跟进按钮**/
    handleFollow(row){
      this.drawer = true;
      this.customerId = row.id;
      this.customerStatus = row.status;
      this.followTitle = row.userName +" "+ row.phone+" 跟进记录";
      this.getFollowList(this.customerId);
    },
    //订车
    handleToOrder(row){
      this.orderForm.customerId = row.id;
      this.orderForm.customerName = row.userName;
      this.orderForm.carStatus = 'notOut';
      this.orderForm.carInfo = row.intentionCarModels;
      this.orderForm.carColor = row.intentionCarColor;
      this.orderOpen = true;
      this.orderTitle = "新增订单";
    },
    orderSubmitForm(){
      this.$refs["orderForm"].validate(valid => {
        if (valid) {
          addCustomerOrderRecerd(this.orderForm).then(response => {
            this.$modal.msgSuccess("订单新增成功");
            this.orderOpen = false;
            this.getList(this.customerId);
          });
        }
      });
    },
    orderCancel(){
      this.orderOpen = false;
      this.orderForm = { };
    },
    handleDrawerAddFollowUp(){
      this.innerDrawer = true;
      this.followForm = {};
      this.followForm.followUpDate = this.getDateYYYYMMddHHMMSS();
      this.followForm.customerId = this.customerId;
      this.followForm.followType = this.customerStatus;
    },
    getDateYYYYMMddHHMMSS(){
      const date = new Date();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const strDate = date.getDate().toString().padStart(2, '0');
      const starHours = date.getHours().toString().padStart(2, '0');
      const starMinutes = date.getMinutes().toString().padStart(2, '0');
      const starSeconds = date.getSeconds().toString().padStart(2, '0');
      return `${date.getFullYear()}-${month}-${strDate} ${starHours}:${starMinutes}:${starSeconds}`;
    },
    getDateYYYYMMdd(){
      const date = new Date();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const strDate = date.getDate().toString().padStart(2, '0');
      return `${date.getFullYear()}-${month}-${strDate}`;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.followUpList = this.followUpList;
          if (this.form.id != null) {
            updateCustomer(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addCustomer(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    submitFollowForm(){
      this.$refs["followForm"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateCustomerFollowRecerd(this.followForm).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getFollowList(this.customerId);
            });
          } else {
            addCustomerFollowRecerd(this.followForm).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getFollowList(this.customerId);
              this.innerDrawer = false;
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除客户信息编号为"' + ids + '"的数据项？').then(function() {
        return delCustomer(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 跟进模块-客户跟进记录序号 */
    rowFollowUpIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 跟进模块-客户跟进记录添加按钮操作 */
    handleAddFollowUp() {
      let obj = {};
      obj.followUpDate = "";
      obj.followUpRecord = "";
      obj.appointmentTime = "";
      obj.remark = "";
      obj.intentionLevel = "";
      this.followUpList.push(obj);
    },
    /** 跟进模块-客户跟进记录删除按钮操作 */
    handleDeleteFollowUp() {
      if (this.checkedFollowUp.length == 0) {
        this.$modal.msgError("请先选择要删除的跟进模块-客户跟进记录数据");
      } else {
        const followUpList = this.followUpList;
        const checkedFollowUp = this.checkedFollowUp;
        this.followUpList = followUpList.filter(function(item) {
          return checkedFollowUp.indexOf(item.index) == -1
        });
      }
    },
    //新增跟进时，选择跟进结果实现不同表单校验
    selctRadion(e){
      if(e=='fail'){
        // this.followRules.defeatReasons = [{required: true, message: "战败原因不能为空", trigger: "blur"}]
        this.followRules.intentionLevel = [];
        this.followRules.nextFollowUpTime = [];
        this.followFormShow.defeatReasonsShow = true;
        this.followFormShow.appointmentTimeShow=false;
        this.followFormShow.intentionLevelShow=false;
        this.followFormShow.nextFollowUpTimeShow=false;
        this.followFormShow.nextFollowUpRecordShow=false;
      }else if(e=='going'){
        this.followRules.defeatReasons = [];
        this.followRules.appointmentTime = [];
        this.followFormShow.defeatReasonsShow = false;
        this.followFormShow.appointmentTimeShow=false;
        this.followFormShow.intentionLevelShow=true;
        this.followFormShow.nextFollowUpTimeShow=true;
        this.followFormShow.nextFollowUpRecordShow=true;
      }else if(e=='maker'){
        this.followRules.defeatReasons = [];
        this.followFormShow.defeatReasonsShow = false;
        this.followFormShow.appointmentTimeShow=true;
        this.followFormShow.intentionLevelShow=true;
        this.followFormShow.nextFollowUpTimeShow=true;
        this.followFormShow.nextFollowUpRecordShow=true;
        this.followForm.makerStatus ="waitStore";
      }
    },
    /** 复选框选中数据 */
    handleFollowUpSelectionChange(selection) {
      this.checkedFollowUp = selection.map(item => item.index)
    },
    handleDrawerClose(done){
      this.getList()
      this.drawer = false;
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/customer/export', {
        ...this.queryParams
      }, `customer_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.specialColor{
  color:red;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.login-code-img {
  height: 38px;
}
.el-table .warning-row {
  background: #E6A23C;
}

.el-table .success-row {
  background: #67C23A;
}

.el-table .danger-row {
  background: #F56C6C;
}
</style>
